﻿@{
    ViewBag.Title = Model.siteName+" - "+ Model.htmlTitle;
    ViewBag.Description = Model.htmlDescription;
    ViewBag.Keywords = Model.htmlKeywords;
}
@model BDShop.Models.ProductModels
@using BDShop.BO.Web.Ajax
@using BDShop.Entities
@using BDShop.Library.Extensions
@using BDShop.Configuration
@using BDShop.Business
@using BDShop.Web
    <!--Left Part-->
    <div id="column-left">
        <!--Bestsellers Part Start-->
        @Html.Action("BestSellerProduct", "Product", new {flag = 2, id = @Model.ID})
        <!--Bestsellers Part End-->
        <!--Latest Product Start-->
        @Html.Action("LatestProduct", "Product", new {flag = 2, id = @Model.ID})
        <!--Latest Product End-->
        <!--Banner Start-->
        <div class="banner">
            <div><a href="#">
                     <img src="/Images/product/small-banner1-220x350.jpg" alt="banner" title="banner" /></a></div>
        </div>
        <!--Banner End-->
    </div>
    <!--Left End-->
    <!--Middle Part Start-->
    <div id="content">
        <div class="breadcrumb">@Html.Raw(@ViewBag.Navigate)</div>
        <h1>@Model.Name</h1>
        <div class="product-info">
            <div class="left">
                <div class="image">
                    @{
                        ProductImage productImage = (ProductImage) ViewBag.FirstProductImage;
                        List<ProductImage> listProductImage = (List<ProductImage>) ViewBag.ProductImage;
                    }
                    <a href="@string.Format("{0}/{1}", BDShopConfiguration.Storage.MainImagePath, productImage.Image500)" title="@Model.Name" class="cloud-zoom colorbox" id='zoom1' rel="adjustX: 0, adjustY:0, tint:'#000000',tintOpacity:0.2, zoomWidth:360, position:'inside', showTitle:false">
                        <img src="@string.Format("{0}/{1}", BDShopConfiguration.Storage.MainImagePath, productImage.Image350)" title="@Model.Name" alt="@Model.Name" id="image" /><span id="zoom-image"><i class="zoom_bttn"></i> Phóng to</span></a>
                </div>
                <div class="image-additional">

                    @foreach (var image in listProductImage)
                    {
                        <a href="@string.Format("{0}/{1}", BDShopConfiguration.Storage.MainImagePath, image.Image500)" title="@Model.Name" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '@string.Format("{0}/{1}", BDShopConfiguration.Storage.MainImagePath, image.Image350)' ">
                            <img src="@string.Format("{0}/{1}", BDShopConfiguration.Storage.MainImagePath, image.Image350)" width="62" title="@Model.Name" alt="@Model.Name" /></a>
                    }
                </div>
            </div>
            <div class="right">
                @using (Html.BeginForm("AddToCart", "Product", new { productID = @Model.ID }, FormMethod.Post, new { id = "frmAddToCart" }))
                {
                    @Html.AntiForgeryToken()
                    <div class="description">
                        <span>Thương hiệu:</span> <a href="#">@Model.Brand</a><br />
                        <span>Mã sản phẩm:</span> @Html.DisplayFor(m => m.ID)<br />
                        <span>Tình trạng:</span> @(Model.Status == ProductStatus.InStock ? "Còn hàng" : "Hết hàng")
                    </div>
                    <div class="price">
                        Giá: 
                        @if (Model.DiscountPrice == 0)
                        {
                            <span class="price-new">@Model.Price.ToCurrencyString(false, true)</span>
                        }
                        else
                        {
                            <span class="price-old">@Model.MarketPrice.ToCurrencyString(false, true)</span>
                            <span class="price-new">@Model.Price.ToCurrencyString(false, true)</span>
                        }

                        <br />
                        <span class="price-tax"></span>
                        <br />
                    </div>
                    <div class="options">
                        <h2>Màu sắc</h2>
                        <div id="option-226" class="option">
                            <span class="required">*</span> <b>Chọn:</b><br />
                            @Html.DropDownList("ddlColor", (IEnumerable<SelectListItem>) ViewBag.productPropertyData)
                            <label id="ddlColor-error" class="error valid" for="ddlColor"></label>
                        </div>
                    </div>
                    <div class="cart">
                        <div>
                            <label id="qty-error" class="error valid" for="qty"></label>
                        </div>
                        <div>
                            <div class="qty">
                                <strong>Số lượng:</strong> <a class="qtyBtn mines" href="javascript:void(0);">-</a>
                                <input id="qty" type="text" class="w30" name="quantity" size="2" value="1" />
                                <a class="qtyBtn plus" href="javascript:void(0);">+</a>
                                <div class="clear"></div>
                            </div>
                            <input type="submit" value="Mua hàng" id="button-cart" class="button" />
                        </div>
                        <div><a href="/Product/AddToWishList/@Model.ID" class="wishlist">Yêu thích</a></div>
                    </div>
                    <div class="review">
                        <div>
                            @switch ((int)Math.Ceiling((decimal)(Model.Rating / ((Model.Rater==0)?1:Model.Rater))))
                            {
                                case 1:
                                <img src="/Images/stars-1.png" alt="1 sao." />
                                    break;
                                case 2:
                                <img src="/Images/stars-2.png" alt="2 sao." />
                                    break;
                                case 3:
                                <img src="/Images/stars-3.png" alt="3 sao." />
                                    break;
                                case 4:
                                <img src="/Images/stars-4.png" alt="4 sao." />
                                    break;
                                case 5:
                                <img src="/Images/stars-5.png" alt="5 sao." />
                                    break;
                                default:
                                    <img src="/Images/stars-1.png" alt="1 sao." />
                                    break;
                            }
                            &nbsp;&nbsp;<a onclick="$('a[href=\'#tab-review\']').trigger('click');">@ViewBag.NumberComment bình luận</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="$('a[href=\'#tab-review\']').trigger('click');">Bình luận</a></div>
                    </div>
                    <!-- AddThis Button BEGIN -->
                    <div class="addthis_toolbox addthis_default_style ">
                        <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> 
                        <a class="addthis_button_tweet"></a> <a class="addthis_button_google_plusone" g:plusone:size="medium"></a> 
                        <a class="addthis_counter addthis_pill_style"></a> 
                    </div>
                    <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=xa-506f325f57fbfc95"></script>
                    <!-- AddThis Button END -->
                }
            </div>
        </div>
        <!-- Description and Reviews Tab Start -->
        <div id="tabs" class="htabs"><a href="#tab-description">Chi tiết</a> <a href="#tab-review">Bình luận (@ViewBag.NumberComment)</a> </div>
        <div id="tab-description" class="tab-content">
            @Html.Raw(Model.Description)
        </div>
        <div id="tab-review" class="tab-content">
            @using (Ajax.BeginForm("Comment","Product",new{productID=Model.ID},new AjaxOptions{OnSuccess = "Comment_OnSuccess"},new{id="frmComment"}))
            {
                if(WebSecurity.IsAuthenticated)
                {
                   
                    <div id="review"></div>
                    <div id="notify" style="color:red"></div>
                    <h2 id="review-title">Viết bình luận</h2>
                    <br/>
                    <span class="required">*</span>
                    <b>Nội dung:</b> <label id="content-error" class="error valid" for="commentcontent"></label>
                    <textarea id="commentcontent" name="content" cols="40" rows="8" style="width: 98%;"></textarea>
                    <span style="font-size: 11px;"><span style="color: #FF0000;">Ghi chú:</span> Không cho phép HTML!</span>
                    <br />
                    <br />
                    <b>Bình chọn:</b>
                    <span>Tệ</span>
                
                    <input type="radio" name="rating" value="1" />
                
                    <input type="radio" name="rating" value="2" />
               
                    <input type="radio" name="rating" value="3" />
               
                    <input type="radio" name="rating" value="4" />
               
                    <input type="radio" name="rating" value="5" />
               
                    <span>Tốt</span> <label id="rating-error" class="error valid" for="rating"></label>
                    <br />
                    <br />
                    @Html.GenerateCaptcha()
                    <br />
                    <br />
                    <div class="buttons">
                        <div class="right"><input type="submit" value="Đăng bình luận" id="btnComment" class="button" /></div>
                    </div>
                }
                else
                {
                    <P>Quý khách vui lòng @Html.RouteLink("đăng nhập", "dang-nhap", new { returnUrl = Request.RawUrl }, new { @style = "color:#d45c93" }) để viết nhận xét về sản phẩm.</P>
                }
                
                 <h2 id="review-list">Danh sách bình luận</h2>
                @Html.Action("CommentList", "Product",new{id=Model.ID})
            }
        </div>
        <script>
            $(document).ready(function() {
                $('#tabs a').tabs();
            });
        </script>
        <!-- Description and Reviews Tab Start -->
        <!--Related Product Start-->
        @Html.Action("RelatedProduct", "Product", new { id = @Model.ID })
        <!--Related Product End-->
    </div>
    <!--Middle Part End-->
    <div class="clear"></div>

<script>
    function Comment_OnSuccess(result) {
        $("#notify").html(result);
        $("#commentcontent").val("");
    }

    $("#frmAddToCart").validate({
        rules: {
            quantity: {
                numericOnly: true,
                min: 1,
                max:30
            },
            ddlColor: {
                required: true
            }
        },
        messages: {
            ddlColor: "Vui lòng chọn màu sản phẩm.",
            quantity:"Số lượng không hợp lệ."
        }
    });

    $.validator.addMethod("numericOnly", function (value) {
        return /^[0-9]+$/.test(value);
    }, '');
    
    $("#frmComment").validate({
        rules: {
           
            content: {
                required: true
            },
            rating: {
                required: true
            }
        },
        messages: {
            content: "Vui lòng nhập nội dung nhận xét.",
            rating: "Vui lòng bình chọn cho sản phẩm."
        }
    });
</script>
